<template>
    <div class="makerList">
        <div class="makerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">比率调整<i class="el-icon-close"></i></div>
		</div>
        <div class="makerList_bottom">
            <div class="new">
                <div class="shopList">
                    <!-- <div class="title1">
                        <h3>当前可分配佣金比率：30%</h3>
                        <span>（金牌，银牌，铜牌精英比率之和不可大于30%）</span>
                    </div> -->
                    <div class="shopList_serch">
                        <div class="block">
                            <span class="demonstration">金牌精英：{{value3}}%</span>
                            <el-slider :min="minVal3" :max="maxVal" v-model="value3"></el-slider>
                        </div>
                        <div class="block">
                            <span class="demonstration">银牌精英：{{value2}}%</span>
                            <el-slider :min="minVal2" :max="maxVal" v-model="value2"></el-slider>
                        </div>
                        <div class="block">
                            <span class="demonstration">铜牌精英：{{value1}}%</span>
                            <el-slider :min="minVal1" :max="maxVal" v-model="value1"></el-slider>
                        </div>
                    </div>
                    <div class="btn">
                         <el-button type="primary" @click="toChange" size="mini">确定调整</el-button>
                    </div>
                </div>
            </div>
            
            <div class="makerList_table">
                <div class="makerList_bottom_table">
                    <h3>精英比率调整记录</h3>
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>修改时间</th>
							<th>生效时间</th>
							<th>金牌精英</th>
							<th>银牌精英</th>
							<th>铜牌精英</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td></td>
							<td>{{$moment(v.create_time*1000).format('YYYY-MM-DD HH:mm')}}</td>
							<td>{{v.level3}}%</td>
							<td>{{v.level2}}%</td>
							<td>{{v.level1}}%</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="12">当前数据空空如也</td></tr>
					</table>
				</div>
				<div class="makerList_bottom_page">
				<div class="makerList_bottom_page_left">
					<div class="makerList_bottom_page_left_checkAll" @click="handerCheckAll">
						<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
					</div>全选
					<!-- <button class="busineList_bottom_page_left_btn" @click="selectDel">删除</button> -->
					</div>
					<div class="makerList_bottom_page_right">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total"
							background>
						</el-pagination>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api/index.js'
export default {
    data(){
        return{
            tableList:[{}],
            input:'',
			checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
            value3:15,  //金
            value2:15,  //银
            value1:15,  //铜
			minVal3:70,
			minVal2:60,
			minVal1:50,
			maxVal:99
        }
    },
	mounted(){
		this.getHistoryList()
		this.getNowRatio()
	},
    methods: {
		// 获取修改比率历史
		getHistoryList(){
			api.ratioHistory({page:this.page,pagesize:this.pageSize}).then(res=>{
				console.log(res);
				if(res.code==1){
					this.tableList = res.data.list?res.data.list:[]
					this.total = res.data.total
				}
			})
		},

		// 当前比率查看
		getNowRatio(){
			api.viewDividend().then(res=>{
				console.log(res);
				if(res.code==1){
					if(res.data.master==1){
						this.value3 = res.data.level3
						this.value2 = res.data.level2
						this.value1 = res.data.level1
					}
				}
			})
		},

		// 确定调整
		toChange(){
			api.ratioPrice({lv1:this.value1,lv2:this.value2,lv3:this.value3}).then(res=>{
				if(res.code==1){
					this.getHistoryList()
					this.$message.success('已保存修改')
				}else{
					this.$$message.error(res.msg)
				}
			})
		},

         // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index > -1){
						arr.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				this.shelvesAlls.push(this.tableList[i].product_id);
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
				}else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for(let i=0;i<res.length;i++){
					for(let j=i+1;j<res.length;j++) {
						if(res[i] == res[j]) {
							res.splice(j,1);
							j--;
						}
					}
				};
				this.checkBoxAll.map(v => {
					return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})
				
				console.log(this.shelvesAlls);
			},

        // 搜索
        handerSeach(){},

        handleChange1(){},
        handleChange2(){},

        //分页
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(val);
				this.getHistoryList()
			},
			handleCurrentChange(val) {
			    this.page = val;
				console.log(val);
				this.getHistoryList()
			},
    },
}
</script>

<style lang="less" scoped>
    @import 'ratioPrice.less';
</style>